<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 功能1：页面加载时显示所有用户数据，并可删除和查询详细信息 -->
    <title>管理员权限-用户列表</title>
</head>
<body>
    <table style="width: 100%; text-align: center;">
        <thead> 
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>邮箱</td>
                <td>电话</td>
                <td>姓名</td>
                <td>宠物姓名</td>
                <td colspan="2" >操作</td>
            </tr>
        </thead>
        <tbody id="data">
        </tbody>
    </table>
    <script>
        //页面加载
        window.onload=function(){
            //ajax
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
                    //获取数据
                    var obj=xhr.responseText;
                    //通过JSON.parse将数据转换为JS对象
                    var msg=JSON.parse(obj);
                    //通过DOM获取id为data的值
                    var data=document.getElementById('data');
                    var html=""
                    //通过循环遍历msg数组的所有数据
                    //由于result返回过来的数据不仅有sql语句返回的数组data,还有我们设置的code值和msg值，所有调用时需要使用msg.data先调用sql语句返回的数组
                    for(var i=0;i<msg.data.length;i++){
                    //拼接模板字符串
                    html += 
                    //删除标签使用自定函数del(uid),查询标签直接跳转到user_list.html并给出参数uid
                    `<tr>
                        <td>${msg.data[i].uname}
                        <td>${msg.data[i].upwd}
                        <td>${msg.data[i].email}
                        <td>${msg.data[i].phone}
                        <td>${msg.data[i].user_name}
                        <td>${msg.data[i].Pets_name}
                        <td><a href="javascript:del(${msg.data[i].uid})">删除</a></td>
                        <td><a href="root_user_list.html?uid=${msg.data[i].uid}">查询</a></td>
                    </tr>`  
                }
                data.innerHTML=html;
                }
            }
            var url="http://127.0.0.1:8080/a1/users/userlist"
            xhr.open('GET',url,true);
            xhr.send();
        }
        //删除功能
        function del(uid){
            //弹框以确认是否删除rs接收返回值 true/flase
            var rs=confirm('是否确认删除?');
            //判断返回值是true还是flase
            if(!rs){
                return
            }
                //ajax
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    //判断响应码
                    if(xhr.readyState===4&&xhr.status===200){
                        //将xhr.responseText的返回值转换为js对象
                        var res=JSON.parse(xhr.responseText);
                        //判断res的code元素值，200为正确 201为失败
                        if(res.code==200){
                            //刷新页面
                            location.reload(true);
                        }else{
                            alert('删除失败');
                        }
                    }
                }
                var url=`http://127.0.0.1:8080/a1/users/${uid}`
                xhr.open('DELETE',url,true);
                xhr.send(); 
        }
    </script>
</body>
</html>